<template>
  <div class="overAll">
    <div class="gray"></div>
    <div style="position:relative;">
      <div
        style="font-size:17px;left:30px;top:0px;font-weight:400;position:absolute;color:#474747;"
      >角色管理</div>
      <div class="add_management">
        <a-row class="op-functions">
          <div></div>
          <div></div>
          <a-col>
            <a-button v-action="'pms:role:create'" type="primary" @click="newRole">
              <a-icon type="plus-circle" />添加角色
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="content_table">
        <a-table
          :pagination="pagination_shop"
          :columns="columnsCommercial"
          :data-source="data_commercial"
          :rowKey="'id'"
          :loading="loading"
          :rowClassName="rowClassRender"
          @change="tableDataQuery"
        >
          <a
            slot="index"
            slot-scope="text,record,index"
          >{{ (pagination_shop.current-1)*pagination_shop.pageSize+index+1 }}</a>
          <span slot="createTimeTitle">
            创建时间&nbsp;
            <span>
              <a-icon type="question-circle" />
            </span>
          </span>
          <span slot="dateFormat" slot-scope="text">{{ text.createTime|moment }}</span>
          <span slot="hasAccountInfo">
            是否提
            <br />供账号
          </span>
          <span slot="shopCount">门店数量</span>
          <div slot="action_details" slot-scope="text, record">
            <a class="edit_role" v-action="'pms:role:update'" @click="editRole(record)">编辑权限</a>
            <a-divider type="vertical" />
            <a class="view_role" v-action="'pms:role:view'" @click="viewRole(record)">查看权限</a>
            <a-divider type="vertical" />
            <a v-action="'pms:role:editStatus'" @click="checkRoleStatus(record)">{{ record.activeFlag?'停用':'启用' }}</a>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import { queryRoles, changeRoleStatus } from '@/api/authority/role'
// 商户的基本表格头
const columnsCommercial = [
  {
    align: 'center',
    title: '序号',
    scopedSlots: {
      customRender: 'index'
    }
  },
  {
    align: 'center',
    title: '角色名称',
    dataIndex: 'name'
  },
  {
    align: 'center',
    key: 'createTImeTitle',
    // sorter: (a, b) => a.createTime - b.createTime,
    slots: { title: 'createTimeTitle' },
    scopedSlots: { customRender: 'dateFormat' }
  },
  {
    align: 'center',
    title: '创建者',
    dataIndex: 'userName'
  },
  {
    align: 'center',
    title: '角色描述',
    dataIndex: 'remark'
  },

  {
    align: 'center',
    title: '操作',
    scopedSlots: {
      customRender: 'action_details'
    }
  }
]

export default {
  inject: ['reload'],
  data () {
    return {
      loading: false,
      pagination_shop: {
        total: 0,
        current: 1,
        defaultCurrent: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条`
      },
      data_commercial: [],
      columnsCommercial
    }
  },
  created () {
    this.queryData({
      pageNumber: 1,
      pageSize: 10
    })
  },
  mounted () {},
  methods: {
    rowClassRender (record, index) {
      return record.activeFlag ? '' : '.disable_row'
    },
    // 启用/停用
    checkRoleStatus (record) {
      this.$confirm({
        title: '警告?',
        content: `您确定要${record.activeFlag ? '停用' : '启用'}该角色?`,
        onOk: () => {
          this.loading = true
          record.activeFlag = !record.activeFlag
          changeRoleStatus(record)
            .then(res => {
              this.loading = false
              if (res.success) {
                this.reload()
              }
            })
            .catch(err => {
              this.loading = false
              console.log(new Error(err))
            })
        }
      })
    },
    // 页码查询
    tableDataQuery (pagination, filters, sorter) {
      this.pagination_shop.current = pagination.current
      this.queryData({
        pageNumber: pagination.current,
        pageSize: pagination.pageSize
      })
    },
    // 查询数据
    queryData (option) {
      this.loading = true
      queryRoles({
        pageNumber: option.pageNumber,
        pageSize: option.pageSize
      })
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pagination_shop.total = res.totalNum
            this.data_commercial = res.voList
          }
        })
        .catch(err => {
          this.loading = false
          console.log(new Error(err))
        })
    },
    // 查看权限
    viewRole (record) {
      this.$router.push({
        path: '/authority/newRole',
        query: {
          mode: 'view',
          id: record.id
        }
      })
    },
    // 编辑权限
    editRole (record) {
      this.$router.push({
        path: '/authority/newRole',
        query: {
          mode: 'edit',
          id: record.id
        }
      })
    },
    // 添加权限
    newRole () {
      this.$router.push({
        path: '/authority/newRole',
        query: {
          // 参数携带方式
          mode: 'new'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.disable_row {
  background: #ccc;
}
.submit_shop {
  margin-left: 50%;
  padding: 2px 10px;
  transform: translateX(-50%);
}

.overAll {
  width: 100%;
  padding-bottom: 30px;
  position: relative;
  background-color: white;
}
.ant-table-wrapper {
  background-color: white !important;
}

.add_management {
  position: relative;
  z-index: 99;
  width: 300px;
  margin-bottom: 20px;
  float: right;
  margin-right: 70px;
}
.add_management .ant-col-7 {
  margin-left: 10px;
}
.search {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
  padding: 0px 20px 20px 20px;
}
.search .ant-row {
  padding-top: 10px;
}

.search .search_top {
  height: 50px;
  line-height: 50px;
}

.search_button {
  text-align: center;
}

.search_button button {
  padding: 5px 15px;
}

.search_button_on button {
  color: white;
  background-color: #1890ff;
  border: none;
  border-radius: 5px;
}

.search_button_reset button {
  border: none;
  border-radius: 5px;
}

.search_title {
  text-align: right;
  margin-right: 10px;
}

.content_table {
  width: 100%;
  margin-top: 20px;
}

.gray {
  width: 100%;
  height: 20px;
  background-color: #f0f2f5;
}

.op-functions {
  display: flex;
  width: 350px;
  justify-content: space-between;
  position: relative;

  .export .ant-select {
    width: 100px;
  }
}

.w260 {
  width: 200px;
}

.w200 {
  width: 200px;
}
.w100 {
  width: 100px;
}
.w250 {
  width: 250px;
}

.search-op-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
